<template>
  <!-- 设备统计模板 -->
  <!-- 右侧内容 -->

  <div>
    <gongyong @serchClick="serchClick" ref="gongyong" @resetClick="resetClick" :gongyongOption="gongyongOption">
      <!-- 顶部栏 -->
      <template #top-left>
        <div class="block">
          <span class="date-text">操作时间</span>
          <el-date-picker size="mini" v-model="dateValue" type="daterange" range-separator="→" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" :clearable="false">
          </el-date-picker>
        </div>
      </template>

      <!-- 中间图表 -->
      <template #centre>
        <div ref="myChart" :style="{ width: '100%', height: '270px' }" v-loading="loading"></div>
      </template>

      <template #hader-bottom>
        <!-- 导出 Derived form-->
        <derivedTbale v-if="but_derivedTbale" class="importX" :suoS="suoS" :disabled="disabled" />
      </template>

      <!-- 下边的Table组件 -->
      <template #bottom>
        <deviceTable :devTable="facilityData" :dataList="dataList" v-loading="loading" :tableStyle="tableStyle"></deviceTable>
      </template>
    </gongyong>
  </div>
</template>

<script>
import gongyong from "../layout/gongyong.vue"; // 共用模板
import echarts from "echarts"; // 引入eahers
import deviceTable from "@/views/waterAnalysi/components/deviceTable.vue";
import derivedTbale from "@/views/waterAnalysi/components/derivedTbale.vue"; //导出Excel

import {
  PostEquipstat,
  PostEquipstatlistAll,
  PostEquipstatExprotXls, //导出xlsx数据
} from "@/api/operationAnalysis/waterAnalysis";
export default {
  components: {
    gongyong,
    deviceTable,
    derivedTbale,
  },
  props: ["nodeData"],
  data () {
    return {
      gongyongOption: {
        top: true,
        center: true,
        bottom: true,
        rest: true, // 重置按钮
      }, // 共用组件配置---------
      // 导出Excel---------
      but_derivedTbale: true,
      disabled: false,
      disabledImport: false,

      loading: true,
      dateValue: "", // 日期绑定
      suoS: {
        monitorPointId: "", // 监测点ID
        searchStartDate: "", // 日期绑定 开始时间
        searchEndDate: "", // 日期绑定 结束时间
      }, // 查询条件
      facilityData: [], // 设备统计列表
      facilityPillarData: [], // 设备统计柱状图
      Myecharts: {},
      // 数据列表的配置对象
      dataList: [
        {
          prop: "pumpsetName",
          label: "设备名称",
          id: 1,
        },
        {
          prop: "startDate",
          label: "开始时间",
          id: 2,
        },
        {
          prop: "endDate",
          label: "结束时间",
          id: 3,
        },
        {
          prop: "runTimeDouble",
          label: `运行时长  (h)`,
          id: 4,
        },
      ],
      tableStyle: {
        TableHight: "330",
      }, // table 表格组件高度
    };
  },
  watch: {
    nodeData: {
      handler (val) {
        this.suoS.monitorPointId = 14;
        debugger;
        this.sendPostEquipstatlistAll()
        this.sendPostEquipstat()
      },
      deep: true,
    },
  },
  created () { },
  mounted () {
    // console.log(this.$parent.$parent.$parent.nodeData.id);
    // this.suoS.monitorPointId = this.$parent.$parent.$parent.nodeData; // 拿到监测点ID用来发送请求，目的是一进来就可以看到数据
    // if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData.id) {
    //   this.$refs.gongyong.serchClick(); // 调用一次公共组件搜索按钮
    // } else {
    //   setTimeout(() => {
    //     this.$refs.gongyong.serchClick();
    //   }, 1000);
    // }
    this.newdata();
  },

  // 取出设备名称运行时长
  computed: {},
  methods: {
    exprotXlsx: PostEquipstatExprotXls,

    newdata () {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        undefined;
        month = "0" + month;
      }
      if (day < 10) {
        undefined;
        day == "0" + day;
      }
      // this.suoS.searchStartDate = year += "-" + month + "-" + day;
      // this.suoS.searchEndDate = this.suoS.searchStartDate;
      this.suoS.searchStartDate = "2022-07-01"
      this.suoS.searchEndDate = "2022-07-15"
    },

    // 发请求获取统计数据前判断
    getStatistics () {
      console.log(this.suoS.monitorPointId);
      if (!this.suoS.monitorPointId) {
        console.log("请选择监测点");
        this.$message.error("请选择监测点");
        this.loading = false;

        return;
      }
    },

    // 柱状图
    async sendPostEquipstatlistAll () {
      const res = await PostEquipstatlistAll(this.suoS);
      this.facilityPillarData = res.data;
      if (res.data) {
        let defArray = res.data.map((item) => {
          return item.pumpsetName;
        });
        let defRun = res.data.map((item) => {
          return item.runTimeDouble;
        });
        this.loading = false;
        this.drawLine(defArray, defRun); // 刷新echarts
      } else {
        this.$message.error("此时间阶段不存在");
      }
    },

    // 发数据统计列表
    async sendPostEquipstat () {
      // this.getStatistics();
      const res = await PostEquipstat(this.suoS);
      if(res.data) {
        this.facilityData = res.data;
        if(res.data.length != 0) {
           this.loading = false;
        }
      }
    },

    // 日期选择
    dateChange () {
      console.log(this.dateValue);
      this.suoS.searchStartDate = this.dateValue[0];
      this.suoS.searchEndDate = this.dateValue[1];
      console.log("开始时间" + this.suoS.searchStartDate);
      console.log("结束时间" + this.suoS.searchEndDate);
    },

    // 搜索按钮触发事件
    async serchClick () {
      this.sendPostEquipstat();
      this.sendPostEquipstatlistAll();
    },

    drawLine (deviceName, defRun) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表

      let option = {
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },

          data: deviceName,
          // data: ["测试设备"],

          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          axisLine: { show: false },
          axisTick: { show: false },
          type: "value",
        },

        grid: {
          x: 35,
          x2: 35,
          y: 25,
          y2: 35,
        },
        series: [
          {
            name: "运行时长",
            data: defRun,
            // data: [123],
            type: "bar",
            barWidth: "40%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0B9AC3 " },
                { offset: 1, color: "#5DE7CC" },
              ]),
            },
          },
        ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          x: "center", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          padding: [20, 0, 0, 0],
        },
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        console.log(123);
        myChart.resize();
      });
    },
    // 点击重置按钮
    resetClick () {
      this.dateValue = "";
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-date-editor .el-range-separator {
  padding: 0px 0px;
}
.date-text {
  font-size: 14px;
}
// .rightcontant {
//   width: 85.8%;
// }
// .rightcontant2 {
//   width: 97%;
// }
</style>
